<template>
  <div>
    <!-- <h1>  - - - - - - - - - - - - - -我 是 新 闻 详 情 页 - - - - -  - - - - - - - - -  </h1> -->
    <div class="news_contains">
      <img :src="this.news_details.media_user.avatar_url">
      <a :href="this.news_details.url">
        <h1>{{ this.news_details.title }}</h1>
      </a>
      <p>来源：{{ this.news_details.source }}</p>
      <hr>
      <p
        class="text_content"
        v-html="this.news_details.content"
      />
    </div>
  </div>
</template>


<script>
export default {

  data() {
    return {
      news_details: {}
    };
  },
  created() {
    this.getMsg();
  },
  methods: {
    getMsg() {
      const _this = this;
      // console.log(this.$route.query.id)
      _this.$axios.get(`http://api01.6bqb.com/toutiao/detail?apikey=1F2DEB866ED455312D1D9FFE521BDD97&itemId=${_this.$route.query.id}`)
        .then((res) => {
          console.log(res.data.data);
          _this.news_details = res.data.data;
        });
    },
  },

};
</script>


<style lang="less">

    .news_contains{
        padding: 8px;
        color: #333;
        img{
            float: left;
            width: 20%;
            height: 20%;
            margin-right:8px;
        }
        h1{
            font-size: 16px;
            margin-top: 0px;
        }
        p{
            font-size: 10px;
            color: #888;
        }
        .text_content{
            margin-top: 18px;
            padding-bottom: 50px;
            font-size: 12px;
            color: #444;
            line-height: 2;
            p{
                font-size: 12px;
            }
            img{
                width: 100%;
                margin-bottom: 10px;
            }
        }
    }

</style>
